<template>
    <view class="service-container">
        <view class="main-content">
            <!-- 分类表单 -->
            <view class="main-item">
                <uni-section class="main-item-section" type="line" title="基础数据">
                    <view class="focus-icon" @click="openBusinessPopup">
                        <image src="/static/images/focus.png" mode="widthFix" />
                    </view>
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="form" :rules="rules" ref="form"
                            labelWidth="68px" :label-style="{ fontSize: '14px' }" errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="经销商: " prop="dealerId" :required="true">
                                <view class="inner-view">
                                    <input type="text" :disabled="handleType == 'edit'" class="s-input"
                                        v-model="form.dealerName" placeholder="请选择经销商" />
                                    <u-icon name="search" size="24" @click="handleSearchDealer"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="form.saleDate" placeholder="销售日期">{{ form.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'form', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: form.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="form.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'form' })">{{ form.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="form.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'form' })">{{ form.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s2" :border-bottom="true"
                                labelPosition="top" label="图片: " prop="">
                                <view class="inner-image-view">
                                    <view class="inner-image">
                                        <ImageUpload v-model="form.idCardZ"
                                            @change="e => imageUploadChange({ val: e, type: 'idCardZ' })" />
                                        <text>身份证正面</text>
                                    </view>
                                    <view class="inner-image">
                                        <ImageUpload v-model="form.vehicleInvoice"
                                            @change="e => imageUploadChange({ val: e, type: 'vehicleInvoice' })" />
                                        <text>车辆发票</text>
                                    </view>
                                    <view class="inner-image">
                                        <ImageUpload v-model="form.carQualified"
                                            @change="e => imageUploadChange({ val: e, type: 'carQualified' })" />
                                        <text>车辆合格证</text>
                                    </view>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="客户姓名: " prop="customerName" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.customerName"
                                        placeholder="请输入客户姓名" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="手机号: " prop="telphone">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.telphone" placeholder="请输入手机号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="证件类型: " prop="certificateType" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'form', propKey: 'certificateType', pickerKeyName: 'label', vModelKey: 'value' })">{{
                                        getCommonText({
                                            listKey: 'certificateType', labelKey: 'label', valueKey:
                                                'value', value: form.certificateType
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="证件号码: " prop="certificateNumber">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.certificateNumber"
                                        placeholder="请输入证件号码" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="联系地址: " prop="address" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.address" placeholder="请输入联系地址" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="车架号: " prop="frameNumber" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.frameNumber"
                                        placeholder="请输入车架号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="发动机号: " prop="engineNo" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.engineNo" placeholder="请输入发动机号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="车牌号: " prop="carNumber" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.carNumber" placeholder="请输入车牌号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="车辆用途: " prop="purpose" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'form', propKey: 'purpose', pickerKeyName: 'label', vModelKey: 'value' })">{{
                                        getCommonText({
                                            listKey: 'vehicleUse', labelKey: 'label', valueKey:
                                                'value', value: form.purpose
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="品牌: " prop="brandName" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.brandName" placeholder="请选择品牌" />
                                    <u-icon name="search" size="24"
                                        @click="handleSearchCommon({ formKey: 'form', propKey: 'brandName', pickerKeyName: 'brandName', vModelKey: 'brandName' })"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="型号: " prop="modelName" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input" v-model="form.modelName" placeholder="请输入型号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="登记日期: " prop="registrationDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="登记日期" v-model="form.registrationDate">{{
                                        form.registrationDate }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="额定载客: " prop="peopleNumer">
                                <view class="inner-view">
                                    <input type="number" class="s-input" v-model="form.peopleNumer"
                                        placeholder="请输入载客人数" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="付款方式: " prop="payType" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'form', propKey: 'payType', pickerKeyName: 'label', vModelKey: 'label' })">{{
                                        getCommonText({
                                            listKey: 'payType', labelKey: 'label', valueKey:
                                                'label', value: form.payType
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="车价: " prop="carMoney" :required="true">
                                <view class="inner-view">
                                    <input type="digit" step="0.01" class="s-input" v-model="form.carMoney"
                                        placeholder="请输入车价" @blur="carMoneyChange" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="购置税: " prop="carryPassenger" :required="true">
                                <view class="inner-view">
                                    <input type="digit" step="0.01" class="s-input" v-model="form.carryPassenger"
                                        placeholder="请输入购置税" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 维修补偿V1 -->
            <!-- v-if="isIncludeBusinessType(19)" -->
            <view class="main-item" v-if="isIncludeBusinessType(19)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(19)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm19" :rules="rules"
                            ref="serviceModelForm19" labelWidth="108px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm19.saleDate" placeholder="销售日期">{{
                                        serviceModelForm19.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm19', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm19.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm19.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm19' })">{{
                                        serviceModelForm19.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm19.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm19' })">{{
                                        serviceModelForm19.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="年累计服务次数: " prop="serviceCount" :required="true">
                                <view class="inner-view">
                                    <input type="number" class="s-input s-input-1"
                                        v-model="serviceModelForm19.serviceCount" placeholder="请输入年累计服务次数" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="价格: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input s-input-1" v-model="serviceModelForm19.price"
                                        placeholder="请输入价格" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 维修补偿V5 -->
            <!-- v-if="isIncludeBusinessType(3)" -->
            <view class="main-item" v-if="isIncludeBusinessType(3)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(3)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm3" :rules="rules"
                            ref="serviceModelForm3" labelWidth="108px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm3.saleDate" placeholder="销售日期">{{
                                        serviceModelForm3.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm3', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm3.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm3.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm3' })">{{
                                        serviceModelForm3.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm3.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm3' })">{{
                                        serviceModelForm3.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="年累计服务次数: " prop="serviceCount" :required="true">
                                <view class="inner-view">
                                    <input type="number" class="s-input s-input-1"
                                        v-model="serviceModelForm3.serviceCount" placeholder="请输入年累计服务次数" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="价格: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input s-input-1" v-model="serviceModelForm3.price"
                                        placeholder="请输入价格" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 安心保 -->
            <view class="main-item" v-if="isIncludeBusinessType(6)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(6)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm6" :rules="rules"
                            ref="serviceModelForm6" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm6.saleDate" placeholder="销售日期">{{
                                        serviceModelForm6.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm6', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm6.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm6.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm6' })">{{
                                        serviceModelForm6.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm6.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm6' })">{{
                                        serviceModelForm6.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm6.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 全损置换 -->
            <view class="main-item" v-if="isIncludeBusinessType(16)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(16)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm16" :rules="rules"
                            ref="serviceModelForm16" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm16.saleDate" placeholder="销售日期">{{
                                        serviceModelForm16.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm16', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm16.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm16.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm16' })">{{
                                        serviceModelForm16.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm16.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm16' })">{{
                                        serviceModelForm16.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm16.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 全损置换基础 -->
            <view class="main-item" v-if="isIncludeBusinessType(4)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(4)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm4" :rules="rules"
                            ref="serviceModelForm4" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm4.saleDate" placeholder="销售日期">{{
                                        serviceModelForm4.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm4', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm4.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm4.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm4' })">{{
                                        serviceModelForm4.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm4.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm4' })">{{
                                        serviceModelForm4.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm4.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 全损置换增值 -->
            <view class="main-item" v-if="isIncludeBusinessType(20)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(20)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm20" :rules="rules"
                            ref="serviceModelForm20" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm20.saleDate" placeholder="销售日期">{{
                                        serviceModelForm20.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm20', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm20.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm20.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm20' })">{{
                                        serviceModelForm20.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm20.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm20' })">{{
                                        serviceModelForm20.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm20.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 全损置换-新能源 -->
            <view class="main-item" v-if="isIncludeBusinessType(22)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(22)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm22" :rules="rules"
                            ref="serviceModelForm22" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm22.saleDate" placeholder="销售日期">{{
                                        serviceModelForm22.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm22', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm22.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm22.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm22' })">{{
                                        serviceModelForm22.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm22.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm22' })">{{
                                        serviceModelForm22.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm22.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 电池补偿 -->
            <view class="main-item" v-if="isIncludeBusinessType(23)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(23)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm23" :rules="rules"
                            ref="serviceModelForm23" labelWidth="68px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm23.saleDate" placeholder="销售日期">{{
                                        serviceModelForm23.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm23', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm23.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm23.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm23' })">{{
                                        serviceModelForm23.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm23.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm23' })">{{
                                        serviceModelForm23.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="false"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm23.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 轮胎保障 -->
            <view class="main-item" v-if="isIncludeBusinessType(18)">
                <uni-section class="main-item-section" type="line" :title="getBusinessTypeLabel(18)">
                    <view class="main-item-form">
                        <u--form labelPosition="left" borderBottom :model="serviceModelForm18" :rules="rules"
                            ref="serviceModelForm18" labelWidth="98px" :label-style="{ fontSize: '14px' }"
                            errorType="toast">
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="销售日期: " prop="saleDate" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" v-model="serviceModelForm18.saleDate" placeholder="销售日期">{{
                                        serviceModelForm18.saleDate
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="有效期: " prop="lifespan" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'lifespan', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'lifespanList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm18.lifespan
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="起始日期: " prop="startTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="起始日期" v-model="serviceModelForm18.startTime"
                                    @change="e => commonStartTimeChange({ val: e, formKey: 'serviceModelForm18' })">{{
                                        serviceModelForm18.startTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="截止日期: " prop="endTime" :required="true">
                                <uni-datetime-picker class="inner-date" :border="false" type="datetime"
                                    :clear-icon="true" placeholder="截止日期" v-model="serviceModelForm18.endTime"
                                    @change="e => commonEndTimeChange({ val: e, formKey: 'serviceModelForm18' })">{{
                                        serviceModelForm18.endTime
                                    }}</uni-datetime-picker>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="金额: " prop="price" :required="true">
                                <view class="inner-view">
                                    <input type="digit" class="s-input" v-model="serviceModelForm18.price"
                                        placeholder="请输入金额" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="限额: " prop="limitPrice" :required="true">
                                <text class="inner-text"
                                    @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'limitPrice', pickerKeyName: 'dictValue', vModelKey: 'dictLabel' })">{{
                                        getCommonText({
                                            listKey: 'limitPriceList', labelKey: 'dictValue', valueKey:
                                                'dictLabel', value: serviceModelForm18.limitPrice
                                        }) }}</text>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="第一受益人: " prop="beneficiary">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2"
                                        v-model="serviceModelForm18.beneficiary" placeholder="请输入第一受益人" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎一DOT号: " prop="DOT1" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.DOT1"
                                        placeholder="轮胎一DOT号" @blur="e => dotChange(e, 'DOT')" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎一品牌: " prop="brandName1" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.brandName1"
                                        placeholder="轮胎一品牌" @blur="e => dotChange(e, 'brandName')" />
                                    <u-icon name="search" size="24"
                                        @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'brandName1', pickerKeyName: 'brandName', vModelKey: 'brandName' })"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎一型号: " prop="modelName1" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.modelName1"
                                        placeholder="轮胎一型号" @blur="e => dotChange(e, 'modelName')" />
                                </view>
                            </u-form-item>

                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎二DOT号: " prop="DOT2" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.DOT2"
                                        placeholder="轮胎二DOT号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎二品牌: " prop="brandName2" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.brandName2"
                                        placeholder="轮胎二品牌" />
                                    <u-icon name="search" size="24"
                                        @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'brandName2', pickerKeyName: 'brandName', vModelKey: 'brandName' })"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎二型号: " prop="modelName2" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.modelName2"
                                        placeholder="轮胎二型号" />
                                </view>
                            </u-form-item>

                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎三DOT号: " prop="DOT3" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.DOT3"
                                        placeholder="轮胎三DOT号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎三品牌: " prop="brandName3" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.brandName3"
                                        placeholder="轮胎三品牌" />
                                    <u-icon name="search" size="24"
                                        @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'brandName3', pickerKeyName: 'brandName', vModelKey: 'brandName' })"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎三型号: " prop="modelName3" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.modelName3"
                                        placeholder="轮胎三型号" />
                                </view>
                            </u-form-item>

                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎四DOT号: " prop="DOT4" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.DOT4"
                                        placeholder="轮胎四DOT号" />
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎四品牌: " prop="brandName4" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.brandName4"
                                        placeholder="轮胎四品牌" />
                                    <u-icon name="search" size="24"
                                        @click="handleSearchCommon({ formKey: 'serviceModelForm18', propKey: 'brandName4', pickerKeyName: 'brandName', vModelKey: 'brandName' })"></u-icon>
                                </view>
                            </u-form-item>
                            <u-form-item class="main-item-form-item main-item-form-item-s1" :border-bottom="true"
                                label="轮胎四型号: " prop="modelName4" :required="true">
                                <view class="inner-view">
                                    <input type="text" class="s-input s-input-2" v-model="serviceModelForm18.modelName4"
                                        placeholder="轮胎四型号" />
                                </view>
                            </u-form-item>

                            <u-form-item class="main-item-form-item main-item-form-item-s2" :border-bottom="false"
                                labelPosition="top" label="图片: " prop="">
                                <view class="inner-image-view">
                                    <view class="inner-image">
                                        <ImageUpload v-model="serviceModelForm18.img1" />
                                        <text>轮胎一</text>
                                    </view>
                                    <view class="inner-image">
                                        <ImageUpload v-model="serviceModelForm18.img2" />
                                        <text>轮胎二</text>
                                    </view>
                                    <view class="inner-image">
                                        <ImageUpload v-model="serviceModelForm18.img3" />
                                        <text>轮胎三</text>
                                    </view>
                                    <view class="inner-image">
                                        <ImageUpload v-model="serviceModelForm18.img4" />
                                        <text>轮胎四</text>
                                    </view>
                                </view>
                            </u-form-item>

                        </u--form>
                    </view>
                </uni-section>
            </view>

            <!-- 分类表单结束 -->

            <!--弹窗开始 -->
            <u-picker :show="dealerSelectShow" :columns="[dealerSelectList]" keyName="dealerName" @cancel="closePicker"
                @close="closePicker" @confirm="confirmPicker"></u-picker>

            <u-picker :show="currentPicker.show" :closeOnClickOverlay="true" :columns="currentPicker.columns"
                :keyName="currentPicker.keyName" @cancel="closeCurrentPicker" @close="closeCurrentPicker"
                @confirm="confirmCurrentPicker" :defaultIndex="currentPicker.defaultIndex"></u-picker>

            <u-popup class="business-popup" :show="businessTypeShow" mode="right" @close="closeBusinessPopup"
                @open="openBusinessPopup">
                <view class="business-popup-ctx">
                    <u-checkbox-group iconSize="10" v-model="checkList" iconPlacement="left" placement="column"
                        @change="checkboxGroupChange">
                        <u-checkbox :customStyle="{ marginBottom: '12px' }" label="基础数据" name="基础数据" :checked="true"
                            :disabled="true"></u-checkbox>
                        <u-checkbox @change="e => checkboxChange({ val: e, item: businessTypeItem })"
                            :customStyle="{ marginBottom: '12px' }" v-for="businessTypeItem in dealerBusinessTypeList"
                            :key="businessTypeItem.businessId" :label="businessTypeItem.businessName"
                            :name="businessTypeItem.businessName">
                        </u-checkbox>
                    </u-checkbox-group>
                </view>
            </u-popup>
            <!-- 弹窗结束 -->
        </view>

        <view class="service-btns">
            <u-button type="warning" @click="reset">重置</u-button>
            <u-button type="primary" @click="submitForm">提交</u-button>
        </view>
    </view>
</template>

<script>
import commonMixin from "@/mixins/common";
import ServiceConfig, {
    certificateType,
    vehicleUse,
    payType,
    serviceModelForms,
} from "./serviceConfig";
import EventBus from "@/utils/eventBus";
import { isStrictNumber } from "@/utils";
import moment from "moment";
export default {
    mixins: [commonMixin],
    data() {
        let self = this;
        return {
            form: {
                dealerId: null,
                dealerName: null,
                saleDate: moment().format("YYYY-MM-DD HH:mm:ss"),
                lifespan: "1",
                startTime: moment()
                    .add(1, "days")
                    .startOf("day")
                    .format("YYYY-MM-DD HH:mm:ss"),
                endTime: moment(Date.now())
                    .add(1, "years")
                    .endOf("day")
                    .format("YYYY-MM-DD HH:mm:ss"),
                idCardZ: "",
                vehicleInvoice: null,
                carQualified: null,
                customerName: null,
                telphone: null,
                certificateType: "身份证",
                certificateNumber: null,
                address: null,
                frameNumber: null,
                engineNo: null,
                carNumber: "新车",
                purpose: "1",
                brandName: null,
                modelName: null,
                registrationDate: moment().format("YYYY-MM-DD HH:mm:ss"),
                peopleNumer: 5,
                payType: "全款",
                carMoney: null,
                carryPassenger: null,
            },
            rules: ServiceConfig.serviceRules,
            dealerSelectList: [], // 经销商列表
            defaultText: "请选择",
            dealerSelectShow: false,
            lifespanList: [],
            brandSelectList: [], //品牌下拉列表
            limitPriceList: [], // 限额
            tireSelectList: [], // 轮胎品牌
            currentPicker: {
                show: false,
                columns: [],
                keyName: "",
                formKey: "",
                propKey: "",
                vModelKey: "",
                fn: null,
                defaultIndex: [0],
            },
            certificateType, //证件类型
            vehicleUse, // 车辆用途
            payType, //     付款方式
            businessTypeShow: false,
            dealerBusinessTypeList: [], // popup中经销商业务类型
            checkList: [],
            ...serviceModelForms, // 模板表单
            ServiceConfig,
            handleType: "add",
            optionsParams: {},
        };
    },

    async onLoad(options) {
        if (options.id) {
            this.handleType = "edit";
            this.$set(this.optionsParams, "id", options.id);
            await this.getServiceOrderDetail();
        } else {
            this.handleType = "add";
            await this.commonHandler();
        }
    },
    beforeDestroy() {
        this.resetAllForm();
    },

    methods: {
        reset() {
            uni.showModal({
                title: "温馨提示",
                content: "确定重置吗?",
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        this.resetAllForm();
                    } else if (cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },
        resetAllForm() {
            this.resetForm("form");
            this.ServiceConfig.dealerBusinessTypes.forEach((item) => {
                let formRefKey = `serviceModelForm${item.value}`;
                this.resetForm(formRefKey);
            });
            this.form.dealerName = null;
            this.form.idCardZ = null;
            this.form.vehicleInvoice = null;
            this.form.carQualified = null;
            this.serviceModelForm18.img1 = null;
            this.serviceModelForm18.img2 = null;
            this.serviceModelForm18.img3 = null;
            this.serviceModelForm18.img4 = null;
        },
        async handleSearchDealer() {
            if (this.handleType == "edit") {
                this.$u.toast("无法修改经销商");
                return;
            }
            if (!this.form.dealerName) {
                this.$u.toast("请输入经销商名称");
                return;
            }
            this.dealerSelectList = await this.getCommonSelectList({
                listKey: "dealerSelectList",
                api: this.apis.listDealer2,
                extra: { dealerName: this.form.dealerName },
            });
            if (this.dealerSelectList.length == 0) {
                this.$u.toast("未查询到数据");
                this.form.dealerName = null;
                return;
            }
            this.dealerSelectShow = true;
            this.checkList = ["基础数据"];
        },

        async commonHandler() {
            await this.getDictByKey({
                dictKey: "business_lifespan",
                listKey: "lifespanList",
            });
            await this.getCommonSelectList({
                listKey: "brandSelectList",
                api: this.apis.listBrand2,
                resultKey: "data",
                extra: { type: 0 },
            });
            // 轮胎品牌
            await this.getCommonSelectList({
                listKey: "tireSelectList",
                api: this.apis.listBrand2,
                resultKey: "data",
                extra: { type: 1 },
            });
            // 限额
            await this.getDictByKey({
                dictKey: "limit_price",
                listKey: "limitPriceList",
            });
            this.checkList = ["基础数据"];
        },

        closePicker() {
            this.dealerSelectShow = false;
        },

        async confirmPicker(e) {
            let value = e.value[0];
            this.form.dealerId = value.id + "";
            this.form.dealerName = value.dealerName;
            this.dealerSelectShow = false;
            await this.getCommonSelectList({
                listKey: "dealerBusinessTypeList",
                api: this.apis.listDealerBusinessType,
                extra: { dealerId: this.form.dealerId },
            });
        },

        // 通用搜索处理
        handleSearchCommon({ formKey, propKey, vModelKey, pickerKeyName }) {
            const listObj = {
                lifespan: this.lifespanList,
                certificateType: this.certificateType,
                purpose: this.vehicleUse,
                brandName: this.brandSelectList,
                payType: this.payType,
                limitPrice: this.limitPriceList,
                brandName1: this.tireSelectList,
                brandName2: this.tireSelectList,
                brandName3: this.tireSelectList,
                brandName4: this.tireSelectList,
            };
            const fnObj = {
                lifespan: this.commonChangeLifespan,
                brandName1: this.handleBrandChange,
            };
            if (listObj[propKey] && listObj[propKey].length == 0) {
                this.$u.toast("暂无数据");
                return;
            }
            let findIndex = listObj[propKey].findIndex(
                (item) => item[vModelKey] == this[formKey][propKey]
            );
            this.currentPicker = {
                show: true,
                columns: [listObj[propKey]],
                keyName: pickerKeyName,
                formKey,
                propKey,
                vModelKey,
                fn: fnObj[propKey],
                defaultIndex: findIndex > -1 ? [findIndex] : [0],
            };
        },

        // 关闭当前 picker
        closeCurrentPicker() {
            this.currentPicker.show = false;
        },

        // 确认当前 picker
        confirmCurrentPicker(e) {
            const value = e.value[0];
            this[this.currentPicker.formKey][this.currentPicker.propKey] =
                value[this.currentPicker.vModelKey];
            this.closeCurrentPicker();
            if (this.currentPicker.fn) {
                this.currentPicker.fn({
                    formKey: this.currentPicker.formKey,
                    addKey: this.currentPicker.propKey,
                    result: value[this.currentPicker.vModelKey],
                });
            }
        },

        carMoneyChange(e) {
            let val = e.detail.value;
            let tax = this.getPurchaseTax({ formKey: "form", price: val });
            this.$set(this.form, "carryPassenger", tax);
        },

        getCommonText({ labelKey, listKey, valueKey, value }) {
            const find = this[listKey].find((item) => item[valueKey] == value);
            return find ? find[labelKey] : "暂无信息";
        },

        openBusinessPopup() {
            this.businessTypeShow = true;
        },

        closeBusinessPopup() {
            this.businessTypeShow = false;
        },

        checkboxGroupChange(e) {
            this.$nextTick(() => {
                // console.log(this.checkList);
            });
        },

        checkboxChange({ val, item }) {
            this.$nextTick(() => {
                if (this.checkList.includes(item.businessName)) {
                    let find = this.ServiceConfig.dealerBusinessTypes.find(
                        (_item) => _item.label == item.businessName
                    );
                    if (find) {
                        this.$set(
                            this[`serviceModelForm${find.value}`],
                            "type",
                            item.businessId
                        );
                        this.$set(
                            this[`serviceModelForm${find.value}`],
                            "typeName",
                            item.businessName
                        );
                    } else {
                        this.$set(
                            this[`serviceModelForm${find.value}`],
                            "type",
                            null
                        );
                        this.$set(
                            this[`serviceModelForm${find.value}`],
                            "typeName",
                            null
                        );
                    }
                }
            });
        },

        isIncludeBusinessType(typeNum) {
            let alreadyCheckedList =
                this.ServiceConfig.dealerBusinessTypes.filter((item) =>
                    this.checkList.includes(item.label)
                );
            return alreadyCheckedList.some((item) => item.value == typeNum);
        },

        getBusinessTypeLabel(typeNum) {
            let find = this.ServiceConfig.dealerBusinessTypes.find(
                (item) => item.value == typeNum
            );
            if (find) {
                return find.label;
            } else {
                return "未找到该业务类型";
            }
        },

        handleBrandChange({ result: val, type = "brandName" }) {
            this.serviceModelForm18[`${type}2`] = val;
            this.serviceModelForm18[`${type}3`] = val;
            this.serviceModelForm18[`${type}4`] = val;
        },
        dotChange(e, type) {
            let val = e.detail.value;
            this.serviceModelForm18[`${type}2`] = val;
            this.serviceModelForm18[`${type}3`] = val;
            this.serviceModelForm18[`${type}4`] = val;
        },

        getBusinessInfoByLabel(label) {
            try {
                let find = this.ServiceConfig.dealerBusinessTypes.find(
                    (item) => item.label == label
                );
                return find || {};
            } catch (error) {
                return {};
            }
        },

        async getServiceOrderDetail() {
            try {
                uni.showLoading({ title: "数据加载中" });
                await this.commonHandler();
                let res = await this.apis.getService(this.optionsParams.id, {
                    custom: { catch: true },
                });
                this.handleDetailData(res.data);
                uni.hideLoading();
            } catch (error) {
                console.log(error);
                this.$u.toast("数据加载失败,请刷新重试");
                uni.hideLoading();
            }
        },
        // 处理详情数据
        async handleDetailData(record) {
            let copyRecord = Object.assign({}, record);
            delete copyRecord.businessJson;
            await this.getCommonSelectList({
                listKey: "dealerBusinessTypeList",
                api: this.apis.listDealerBusinessType,
                extra: { dealerId: record.dealerId },
            });
            let businessJson = record.businessJson
                ? JSON.parse(record.businessJson)
                : [];

            let typeNames = businessJson.map((item) => item.typeName) || [];
            this.checkList = this.checkList.concat(typeNames);
            // this.resetAllForm();
            this.form = copyRecord;

            // 添加这个是因为组件内部使用的都是字符串，所以需要转换一下,要不然会导致无法通过表单校验
            for (let key in this.form) {
                if (isStrictNumber(this.form[key])) {
                    this.form[key] = this.form[key] + "";
                } else {
                    continue;
                }
            }
            // 加这个nextTick是因为在编辑的时候，右侧的表单还没有渲染出来，所以无法获取到表单的ref 导致无法重置表单
            this.$nextTick(() => {
                for (let i = 0; i < businessJson.length; i++) {
                    let businessInfo = this.getBusinessInfoByLabel(
                        businessJson[i].typeName
                    );
                    this[`serviceModelForm${businessInfo.value}`] =
                        businessJson[i];
                }
            });
        },

        async handleService() {
            let [first, ...rest] = this.checkList;
            let params = {};
            if (rest.length) {
                let businessJson = [];
                for (let i = 0; i < rest.length; i++) {
                    let businessInfo = this.getBusinessInfoByLabel(rest[i]);
                    businessJson.push(
                        this[`serviceModelForm${businessInfo.value}`]
                    );
                }
                params = { ...this.form };
                params.businessJson = JSON.stringify(businessJson);
            } else {
                params = { ...this.form };
            }
            // 预防修改经销商名称
            if (this.handleType == "add") {
                let find = this.dealerSelectList.find(
                    (item) => item.id == params.dealerId
                );
                params.dealerName = find.dealerName;
            }
            let fn =
                this.handleType == "add"
                    ? this.apis.addService
                    : this.apis.updateService;
            try {
                let response = await fn(params, { custom: { catch: true } });
                if (response.code == 200) {
                    return true;
                }
            } catch (error) {
                return false;
            }
        },
        async submitForm() {
            let allFormValid = await Promise.all(this.handleFormPromise());
            let validNum = allFormValid.reduce(
                (cur, next) => cur + Number(next),
                0
            );
            if (validNum == this.checkList.length) {
                try {
                    uni.showLoading({ title: "提交中..." });
                    let isSuccess = await this.handleService();
                    if (isSuccess) {
                        this.$u.toast("操作成功,返回上一级");
                        EventBus.$emit("refreshServiceList");
                        uni.switchTab({ url: "/pages/index/index" });
                    }
                    uni.hideLoading();
                } catch (error) {
                    console.log(error);
                    uni.hideLoading();
                }
            } else {
                // this.$u.toast("请检查表单是否填写完善");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
$baseFontSize: 14px;
$baseFontSize2: 12px;
$baseFontSize3: 16px;
$baseColor: #333333;
$baseColor2: #666666;
$baseColor3: #999;

uni-page-body {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

.service-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx;
}

::v-deep .main-item {
    background-color: #fff;
    border-radius: 10rpx;

    & ~ .main-item {
        margin-top: 10px;
    }

    &-section {
        position: relative;

        .uni-section-header {
            padding: 12px 10px 0px;
        }
    }

    &-form {
        padding: 0 10px;

        &-item {
            .inner-text {
                font-size: 14px;
                color: #333333;
                min-width: 150px;
                text-align: right;
            }

            .inner-date {
                min-width: 150px;
                text-align: right;
            }

            .inner-view {
                display: flex;
                align-items: center;

                .u-icon {
                    margin-left: 6px;
                }
            }

            .inner-image {
                // width: calc((100% - 320px) / 4);
                margin-left: calc((100% - 320px) / 3);

                &:first-of-type {
                    margin-left: 0;
                }

                &-view {
                    display: flex;
                    margin-top: 10px;
                    flex: 1;
                    width: 100%;
                }

                > text {
                    display: inline-block;
                    width: 100%;
                    text-align: center;
                    font-size: 12px;
                    color: $baseColor2;
                }

                .upload-container {
                    padding: 0;

                    .u-upload__button {
                        margin: 0;
                    }

                    .u-upload__wrap__preview {
                        margin: 0;
                    }
                }
            }
        }

        &-item-s1 {
            .u-form-item__body {
                .u-form-item__body__right {
                    .u-form-item__body__right__content__slot {
                        flex-direction: column;
                        align-items: end;
                        width: 100%;
                    }
                }
            }
        }
    }
}

.service-btns {
    display: flex;
    background-color: #fff;
    padding: 20rpx;

    .u-button {
        width: 45%;
    }
}

.s-input {
    text-align: right;
    font-size: $baseFontSize;
    color: $baseColor;
    min-width: 240px;

    &-1 {
        min-width: 120px;
    }

    &-2 {
        min-width: 180px;
    }

    .input-placeholder {
        // color: $baseColor;
        color: #e45656;
    }
}

.focus-icon {
    width: 22px;
    position: absolute;
    right: 10px;
    top: 10px;

    image {
        width: 100%;
    }
}

.business-popup-ctx {
    padding: 20px;
    min-width: 120px;
}
</style>